<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:th="http://www.thymeleaf.org"
      xmlns:tiles="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org"
      lang="en">

<head>

    <title th:text="#{titulo}">SAR: Sistema de Atención de Requerimientos</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
    <link rel="stylesheet" type="text/css" media="screen, projection" 
          href="../../static/styles/blueprint/screen.css" 
          th:href="@{/resources/static/styles/blueprint/screen.css}" />
    
    <link rel="stylesheet" type="text/css" media="print" 
          href="../../static/styles/blueprint/print.css" 
          th:href="@{/resources/static/styles/blueprint/print.css}" />
          
    <link rel='stylesheet' type='text/css' href='../../static/styles/menu/styles.css' th:href="@{/resources/static/styles/menu/styles.css}"/>
	 
<!--     <link rel="stylesheet" href="../../static/styles/blueprint/plugins/link-icons/screen.css"  -->
<!--     th:href="@{/resources/static/styles/blueprint/plugins/link-icons/screen.css}" type="text/css" media="screen, projection"/> -->

    <link rel="stylesheet" type="text/css" media="screen" 
          href="../../static/styles/booking.css" 
          th:href="@{/resources/static/styles/booking.css}" />

    
    <!-- The following styles and scripts are served from spring-js-resources-{ver}.jar -->
    
    <link rel="stylesheet" type="text/css" 
          href="#" th:href="@{/resources/dijit/themes/tundra/tundra.css}" />
    
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
	<script type='text/javascript' src='menu_jquery.js' th:src="@{/resources/static/styles/menu/menu_jquery.js}"></script>
	
    <script type="text/javascript" src="#" th:src="@{/resources/dojo/dojo.js}"></script>
    <script type="text/javascript" src="#" th:src="@{/resources/spring/Spring.js}"></script>
    <script type="text/javascript" src="#" th:src="@{/resources/spring/Spring-Dojo.js}"></script>
    
    <link rel="stylesheet" href="../styles/jquery/jquery-ui.css" th:href="@{/static/styles/jquery/jquery-ui.css}"/>
	<script src="../static/styles/jquery/jquery.min.js" th:src="@{/static/styles/jquery/jquery.min.js}" ></script>
	<script src="../static/styles/jquery/jquery-ui.js" th:src="@{/static/styles/jquery/jquery-ui.js}"></script>
	
	 <!-- Fullcalendar -->
	
	<link rel="stylesheet" href="../styles/fullcalendar-1.6.4/fullcalendar/fullcalendar.css" th:href="@{/static/styles/fullcalendar-1.6.4/fullcalendar/fullcalendar.css}"/>
	<link rel="stylesheet" href="../styles/fullcalendar-1.6.4/fullcalendar/fullcalendar.print.css" th:href="@{/static/styles/fullcalendar-1.6.4/fullcalendar/fullcalendar.print.css}"/>
	<script src="../static/styles/fullcalendar-1.6.4/fullcalendar/fullcalendar.min.js" th:src="@{/static/styles/fullcalendar-1.6.4/fullcalendar/fullcalendar.min.js}" ></script>
	
	<script>
  $(function() {  
    $( "#from" ).datepicker({
      dateFormat: "dd/mm/yy",
      onClose: function( selectedDate ) {
        $( "#to" ).datepicker( "option", "minDate", selectedDate );
      }
    });
    $( "#to" ).datepicker({
      dateFormat: "dd/mm/yy",
      onClose: function( selectedDate ) {
        $( "#from" ).datepicker( "option", "maxDate", selectedDate );
      }
    });
  });
  
   $(function() {  
    $( "#fechaDP" ).datepicker({
      dateFormat: "dd/mm/yy",
      minDate: 0
    });
  });
   
   $(function() {
     $( "#tabs" ).tabs();
   });
   

</script>

</head>


<body class="tundra">

<div id="page" class="container">

    <div id="header">
        <div id="topbar">
            <div sec:authorize="hasAnyRole('ROLE_CLIENTE', 'ROLE_COORDINADOR', 'ROLE_OPERADOR')" th:if="${#authentication}">            	
               	 <span th:text="#{standard.usuario}">Usuario:</span><span class="small" sec:authentication="name">Login usuario</span> 
               	 |       
               	 <span th:text="#{standard.perfil}">Perfil:</span>
               	 <span sec:authorize="hasRole('ROLE_COORDINADOR')" th:text="#{standard.coordinador}" class="small">Coordinador</span>
               	 <span sec:authorize="hasRole('ROLE_OPERADOR')" th:text="#{standard.operador}" class="small">Operador</span>
               	 <span sec:authorize="hasRole('ROLE_CLIENTE')" th:text="#{standard.cliente}" class="small">Cliente</span>
               	 |                        
               	 <a href="#" th:href="@{/logout}" th:text="#{standard.logout}">Cerrar sesión</a>                                
            </div>
            <p sec:authorize="hasRole('ROLE_ANONYMOUS')">
                <a href="#" th:href="@{/login}" th:text="#{standard.login}">Ingresar</a>
            </p>
        </div>
        <div id="logo">
            <p>
                <img src="../../static/images/sar-logo.jpg" th:src="@{/resources/static/images/sar-logo.jpg}" alt="SAR" />
            </p>
        </div>
    </div>
    
    <div id="content">
    
        <div id="menu" class="span-5" sec:authorize="hasAnyRole('ROLE_CLIENTE', 'ROLE_COORDINADOR', 'ROLE_OPERADOR')" th:if="${#authentication}">
        <div id='cssmenu'>
	    <ul>
		   <li class='has-sub'><a href='#'><span th:text="#{standard.menu.planificacion}">Planificacion</span></a>
		      <ul>
		      	 <li sec:authorize="hasRole('ROLE_COORDINADOR')"><a href='/realizarProgramacion' th:href="@{/realizarProgramacion}"><span th:text="#{standard.menu.realizar-programacion}">Realizar Programacion</span></a></li>
		         <li sec:authorize="hasRole('ROLE_CLIENTE')"><a href='/consultarSolicitudes' th:href="@{/registrarSolicitud}"><span th:text="#{standard.menu.registrarSolicitudes}">Registrar Solicitudes</span></a></li>
		         <li sec:authorize="hasRole('ROLE_CLIENTE')"><a href='/consultaAprobacionProgramacion' th:href="@{/consultaAprobacionProgramacion}"><span th:text="#{standard.menu.consultaAprobacionProgramacion}">Aprobar Programación</span></a></li>
		         <li class='last' sec:authorize="hasRole('ROLE_CLIENTE')"><a href='#'><span th:text="#{standard.menu.aprobar-solucion}">Aprobar Solución</span></a></li>
		      </ul>
		   </li>
		   <li class='has-sub'><a href='#'><span th:text="#{standard.menu.ejecucion}">Ejecucion</span></a>
		      <ul>	
		         <li sec:authorize="hasRole('ROLE_COORDINADOR')"><a href='/activarFase' th:href="@{/activarFase}"><span th:text="#{standard.menu.activarFase}">Activar Fases</span></a></li>
		         <li sec:authorize="hasRole('ROLE_COORDINADOR')"><a href='/auditarSolucion' th:href="@{auditarSolucion}"><span th:text="#{standard.menu.auditar-solucion}">Auditar Solución</span></a></li>
		         <li sec:authorize="hasRole('ROLE_COORDINADOR')"><a href='/gestionarCambios' th:href="@{gestionarCambios}"><span th:text="#{standard.menu.gestionar-cambios}">Gestionar Cambios</span></a></li>
		         <li sec:authorize="hasRole('ROLE_OPERADOR')"><a href='/consultarAtencion' th:href="@{/consultarAtencion}"><span th:text="#{standard.menu.consultarEjecucion}">Ejecutar Atención</span></a></li>
		         <li class='last' sec:authorize="hasRole('ROLE_CLIENTE')"><a href='#'><span th:text="#{standard.menu.aprobar-solucion}">Aprobar Solución</span></a></li>
		      </ul>
		   </li>
		   <li class='has-sub'><a href='#'><span th:text="#{standard.menu.seguimiento}">Seguimiento</span></a>
		      <ul>
		         <li class='last' sec:authorize="hasRole('ROLE_OPERADOR')"><a href='/consultaOperadores' th:href="@{/consultaOperadores}"><span th:text="#{standard.menu.consultarDesempeno}">Consultar Desempeño</span></a></li>
		      </ul>
		   </li>
		   <li class='last'><a href='#'><span th:text="#{standard.menu.administracion}">Administracion</span></a></li>
		</ul>
		</div>		
        </div>
        <div id="main" class="span-18 last" tiles:include="body">

          <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->      
          <!-- At runtime, the body of this <div> will be substituted by -->
          <!-- Tiles in order to create the final HTML page that will be -->
          <!-- sent to the browser.                                      -->
          <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->      
          
          CUERPO ACA!!!
          
        </div>
    </div>
    
    <hr />
    
    <div id="footer">
        <span style="float: right">
			   <a href="?language=en" th:href="@{'?language=en'}">en</a>
		    | 
			   <a href="?language=es" th:href="@{'?language=es'}">es</a>
		</span>
       
    </div>
    
</div>
</body>
</html>